<template>
  <div class="wrapper">
    <div class="content">
      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item label="username">
          <el-input v-model="form.username" class="username"></el-input>
        </el-form-item>
        <el-form-item label="password">
          <el-input v-model="form.password" class="password"></el-input>
        </el-form-item>
        <el-form-item label="email">
          <el-input v-model="form.email" class="email"></el-input>
        </el-form-item>
        <el-form-item label="phone">
          <el-input v-model="form.phone" class="phone"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload class="avatar-uploader" action="https://jk.huwei6.com/api/tengxun/upload2" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <p class="tips">tips:请上传2M以内JPG/PNG格式的图片，比例最好1:1</p>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="edit">修改</el-button>
          <el-button @click="signOut">退出登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XiaodiPersional',
  data() {
    return {
      form: {
        username: '',
        password: '',
        email: '',
        phone: ''
      },
      imageUrl: null
    }
  },
  methods: {
    async edit() {
      const { data: res } = await this.$http.post('/update/person', { username: this.form.username, password: this.form.password, head_img: this.imageUrl, email: this.form.email, phone: this.form.phone, user: window.sessionStorage.getItem('user') })
      if (res.code !== 0) {
        return this.$message.error('修改失败')
      }
      this.$message.success('修改成功')
      window.sessionStorage.setItem('user', this.form.username)
      this.$router.push('/main')
    },
    handleAvatarSuccess(response, file, fileList) {
      this.$message({
        message: '恭喜你，图片上传成功',
        type: 'success'
      })
      this.imageUrl = response.imageUrl
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    async getUserInfo() {
      const { data: res } = await this.$http.post('/person/message', { username: window.sessionStorage.getItem('user') })
      this.form.username = res.data[0].username
      this.form.password = res.data[0].password
      this.form.email = res.data[0].email
      this.form.phone = res.data[0].phone
      this.imageUrl = res.data[0].head_img
      console.log(res)
    },
    signOut() {
      this.$router.push({ name: 'main' })
      window.sessionStorage.setItem('user', '')
    }
  },
  created() {
    this.getUserInfo()
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  min-height: calc(100vh - 262px);
  .content {
    width: 40%;
    margin: 0 auto;
    padding: 50px 0;
  }
}
.username {
  width: 70%;
}
.password {
  width: 70%;
}
.email {
  width: 70%;
}
.phone {
  width: 70%;
}
::v-deep .avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
}
.tips {
  font-size: 12px;
  color: #999;
}
</style>
